<template>
	<view class="WithdrawalRecord">
		<view class="datetime">
			<view class="switch">
				<text class="defaut" :class="staut ? '' : 'active'">HNT</text>
				<u-switch class="staut" size="20" v-model="staut" @change="changeSwitch"></u-switch>
				<text class="defaut" :class="staut ? 'active' : ''">USDT</text>
			</view>
			<view class="btn" @click="open">
				<image src="/static/money/screen.png" mode=""></image>
				<text>时间查询</text>
			</view>
		</view>
		<mescroll-uni v-if="list" ref="mescrollRef" @up="getdata" :down="{use:false}" top="100">
			<view class="slide" v-for="(item, index) in list" :key="index">
				<view class="name">
					{{coin_type}}
				</view>
				<view class="type">
					<view class="box">
						<text class="userType">{{item.memo}}</text>
						<text class="time">{{item.createtime | format}}</text>
					</view>
				</view>
				<view class="balance">
					<text class="color">{{ (+item.money) > 0 ? '+' + item.money : item.money }}</text>
					<text>{{coin_type}}</text>
				</view>
			</view>
		</mescroll-uni>
		<u-empty v-else marginTop="100" mode="history" icon="http://cdn.uviewui.com/uview/empty/history.png"></u-empty>
		<uni-popup ref="popup" type="bottom">
			<view class="pickerview">
				<view class="cancel" @click="cancel">取消</view>
				<view class="srart">开始时间</view>
				<view class="confirm" @click="confirm">确认</view>
			</view>
			<view class="dateRegion">
				<gpp-date-picker @wrapperChange="dateChangeStart" :startDate="startDate" :endDate="endDate" :defaultValue="pickerDate"></gpp-date-picker>
				<view class="srart">结束时间</view>
				<gpp-date-picker @wrapperChange="dateChangeEnd" :startDate="startDate" :endDate="endDate" :defaultValue="pickerDate"></gpp-date-picker>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import gppDatePicker from "@/components/gpp-datePicker/gpp-datePicker.vue"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		components: { gppDatePicker },
		data() {
			return {
				starttime: '',
				endtime: '',
				coin_type: 'USDT', // USDT  HNT
				list: [],
				show: false,
				staut: true,
				startDate: "2021-01-01",
				endDate: "",
				pickerDate: ''
			}
		},
		mixins: [MescrollMixin],
		filters: {
			format(timestamp) {
				var date = new Date(timestamp * 1000),
				M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月',
				D = change(date.getDate()) + '日 ',
				h = change(date.getHours()) + ':',
				m = change(date.getMinutes());
				function change(t) {
				    if (t < 10) {
				        return "0" + t;
				    } else {
				        return t;
				    }
				}
				return M + D + h + m;
				return val
			}
		},
		mounted() {
			this.getNowDate()
			this.starttime = this.formartDate(this.endDate)
			this.endtime = this.formartDate(this.endDate)
		},
		methods: {
			getNowDate() {
				let datetime = new Date();
				let year = datetime.getFullYear();
				let month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
				let date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
				let str = year + '-' + month + '-' + date
				this.endDate = this.pickerDate = str
			},
			dateChangeStart(val) {
				this.starttime = this.formartDate(val.dateValue)
			},
			dateChangeEnd(val) {
				this.endtime = this.formartDate(val.dateValue)
			},
			formartDate(dateStr) {
				// dateStr = 2020-12-12
				if (!dateStr) {
				    return ''
				}
				let newDataStr = dateStr.replace(/\.|\-/g, '-')
				let date = new Date(newDataStr);
				let timestamp = date.getTime() / 1000;
				return timestamp
			},
			changeSwitch(val) {
				this.coin_type = val ? 'USDT' : 'HNT'
				this.mescroll.resetUpScroll()
			},
			confirm() {
				// console.log(this.starttime, this.endtime)
				let dataNow = Date.now() / 1000
				if(this.starttime > this.endtime) {
					uni.showToast({
						title: '开始时间不能小于结束时间'
					})
				} else if (this.endtime > dataNow) {
					uni.showToast({
						title: '结束时间不能小于当前时间'
					})
				} else {
					this.mescroll.num = 1
					this.getdata(this.starttime, this.endtime)
					this.cancel()
				}
			},
			open() {
				this.$refs.popup.open()
			},
			cancel() {
				this.$refs.popup.close()
			},
			getdata(starttime = '', endtime = '') {
				this.$api.sendRequest({
					url: this.$url.USERACCOUNTLOG,
					data: {
						page: this.mescroll.num,
						starttime: starttime,
						endtime: endtime,
						coin_type: this.coin_type
					},
					success: res => {
						if(res.code == 1) {
							this.data = res.data
							let curPageData = res.data.data;
							let curPageLen = curPageData.length;
							//设置列表数据
							if (this.mescroll.num == 1) this.list = [];
							this.list = this.list.concat(curPageData);
							this.mescroll.endBySize(curPageLen, res.data.total)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background: #F3F3F3;
	}
</style>
<style scoped lang="scss">
	.dateRegion {
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		.picker-view {
			width: 750rpx;
			height: 300rpx;
		}
		.item {
			height: 100rpx;
			align-items: center;
			justify-content: center;
			text-align: center;
		}
		.srart {
			font-size: 36rpx;
			font-weight: bold;
			color: #000000;
			text-align: center;
			margin-bottom: 40rpx;
		}
	}
	.pickerview {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 18rpx 40rpx 14rpx 40rpx;
		background: #E5E5E5;
		border-top-left-radius: 44rpx;
		border-top-right-radius: 44rpx;
		align-items: center;
		position: relative;
		.cancel {
			font-size: 34rpx;
			font-weight: bold;
			color: #A4A4A4;
		}
		.srart {
			position: absolute;
			width: 30%;
			left: 50%;
			margin-left: -15%;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			color: #000000;
		}
		.confirm {
			height: 66rpx;
			border: 1rpx solid #707070;
			border-radius: 16rpx;
			font-size: 34rpx;
			font-weight: bold;
			color: #005FDB;
			text-align: center;
			line-height: 66rpx;
			padding: 0 34rpx;
		}
	}
	.datetime {
		padding: 18rpx 36rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		.defaut {
			font-size: 30rpx;
			font-weight: 400;
		}
		.staut {
			margin-left: 20rpx;
			margin-right: 20rpx;
		}
		.active {
			color: #207DFE;
		}
		.switch {
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		.tip {
			font-size: 26rpx;
			font-weight: 400;
			color: #7A7A7A;
		}
		.btn {
			height: 60rpx;
			border: 1rpx solid #707070;
			padding: 0 14rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #4B4B4B;
			border-radius: 14rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			image {
				width: 38rpx;
				height: 38rpx;
				margin-right: 18rpx;
			}
		}
	}
	.slide {
		background: #fff;
		padding: 18rpx 52rpx;
		display: flex;
		margin-bottom: 18rpx;
		.name {
			font-size: 30rpx;
			font-weight: 400;
			color: #000000;
			width: 160rpx;
		}
		.type {
			font-size: 30rpx;
			font-weight: 400;
			color: #000000;
			.box {
				display: flex;
				flex-direction: column;
				.time {
					margin-top: 10rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #7A7A7A;
				}
			}
		}
		.balance {
			flex: 1;
			text-align: right;
			font-size: 30rpx;
			font-weight: 400;
			color: #000000;
			.color {
				color: #FF0000;
			}
		}
	}
</style>
